import React, { Component } from 'react'
import HeaderBar from 'components/headerbar/HeaderBar'
import { CateContainer, UlContainer } from './Category.style'
import Search from 'components/search/Search'
import { get } from 'api/http'
import {
  Route,
  withRouter,
  Redirect,
  Switch
} from 'react-router-dom'
import Classify from './components/Classify'
import Material from './components/Material'

class Category extends Component {

  state = {
    dir: 'left',
    categorylist: {},
    materiallist: {}
  }

  handleClick(dir) {
    this.setState({
      dir
    }, () => {
      console.log(this.props)
      let path = ''
      if (this.state.dir === 'left') {
        path = '/home/category/classify'
      } else {
        path = '/home/category/material'
      }
      localStorage.setItem('categoryPath', path)
      this.props.history.push(path)
    })
  }

  render() {
    return (
      <div>
        <HeaderBar>
          <UlContainer className={this.state.dir}>
            <li className={this.state.dir === "left" ? "active" : ""}
              onClick={() => this.handleClick('left')}
            >
              分类
          </li>
            <li className={this.state.dir === "right" ? "active" : ""}
              onClick={() => this.handleClick('right')}
            >
              食材
          </li>
          </UlContainer>
        </HeaderBar>
        <Search containerBg="#ffffff" inputBg="#efefef"
          placeholder="想吃什么搜这里，如：排骨"
        ></Search>

        <CateContainer>
          <Switch>

            <Route path="/home/category/classify" >
              <Classify dataview={this.state.categorylist}></Classify>
            </Route>

            <Route path="/home/category/material">
              <Material dataview={this.state.materiallist}></Material>
            </Route>

            <Redirect exact from='/home/category' to="/home/category/classify"></Redirect>

          </Switch>
        </CateContainer>


      </div>
    )
  }

  async componentDidMount() {
    let rs = await get('/api/categorylist')
    this.setState({
      categorylist: rs.data.category,
      materiallist: rs.data.material
    })
    console.log(rs)
  }
}

export default withRouter(Category)